<template>
  <a-modal
    width="80vw"
    :visible="visible"
    title="查看对账明细"
    :mask-closable="false"
    hide-cancel
    unmount-on-close
    @before-open="handleBeforeOpen"
    @cancel="handleCancel"
    @ok="handleCancel"
  >
    <table-index :table="table" @loadData="loadData">
      <template #billTime="{ record }">
        <div v-if="record.billTimeEdit">
          <div class="flex items-center justify-center">
            <i-date-picker class="mr-1" v-model="record.billTime" show-time format="YYYY-MM-DD HH:mm:ss" @clear="onClearBillTime(record)" />
            <icon-check-circle-fill size="32" class="cursor-pointer color-1890ff" @click="onClickBillTime(record)" />
            <icon-close-circle-fill size="32" class="cursor-pointer" @click="onCloseBillTime(record)" />
          </div>
          <div class="arco-form-item-message" v-if="record.billTimeError">请选择对账时间</div>
        </div>
        <div v-else>
          {{ record.billTime }}
          <icon-edit class="cursor-pointer" @click="record.billTimeEdit = true" />
        </div>
      </template>
      <template #fileIdList="{ record }">
        <template v-if="record.fileIdList?.length > 0">
          <a-link @click="(e) => onClickFile(e, record.fileIdList)">查看</a-link>
          <a-image-preview-group
            v-model:visible="visibleFile"
            v-model:current="currentFileId"
            infinite
            :srcList="previewList"
            :mask-closable="false"
            @close="handleCloseFile"
          />
        </template>
        <template v-else>
          <span>-</span>
        </template>
      </template>
    </table-index>
  </a-modal>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'

  import { useTable } from '@/hooks/table'
  import { getShortOrderBillDetail, updateShortOrderBillBillTime } from '@/api/finance/examine'
  import { Message } from '@arco-design/web-vue'

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: () => ({}),
    },
  })

  const emits = defineEmits(['update:modelValue', 'ok'])
  const visible = computed({
    get: () => props.modelValue,
    set: (value) => emits('update:modelValue', value),
  })
  const visibleFile = ref(false)

  const table = useTable({
    pagination: false,
    columns: [
      { title: '费用名称', dataIndex: 'itemName', fixed: 'left', width: 90 },
      { title: '操作节点', dataIndex: 'createNodeName', width: 90 },
      { title: '费用类型', dataIndex: 'feeTypeName', width: 90 },
      { title: '收支类型', dataIndex: 'costTypeName', width: 90 },
      { title: '总额', dataIndex: 'amount', unit: '元', width: 90 },
      { title: '本次对账金额', dataIndex: 'billAmount', unit: '元', width: 150 },
      { title: '对账人', dataIndex: 'billedUserName', width: 120 },
      { title: '对账时间', dataIndex: 'billTime', slotName: 'billTime', width: 200 },
      { title: '流水号', dataIndex: 'serialNo', width: 120 },
      { title: '上传凭证', dataIndex: 'fileIdList', slotName: 'fileIdList', width: 90 },
      { title: '对账备注', dataIndex: 'remark', width: 120 },
      { title: '是否撤销对账', dataIndex: 'revokeFlagName', width: 120 },
    ],
  })

  /**
   * @param orderId 订单id
   */
  const TABLE_DATA = ref([])
  const loadData = (orderId: string | number) => {
    table.tableLoading = true
    getShortOrderBillDetail({ orderId })
      .then((res: any) => {
        TABLE_DATA.value = res.result
        table.dataList = res.result.map((item: any) => ({
          ...item,
          billTimeEdit: false,
          billTimeError: false,
        }))
      })
      .finally(() => {
        table.tableLoading = false
      })
  }

  const onClearBillTime = (record: any) => {
    record.billTimeError = true
  }

  const onClickBillTime = (record: any) => {
    updateShortOrderBillBillTime({ id: record.id, billTime: record.billTime }).then(() => {
      Message.success('修改成功')
      record.billTimeEdit = false
      record.billTimeError = false
    })
  }

  const onCloseBillTime = (record: any) => {
    const current: any = TABLE_DATA.value.find((item: any) => item.id == record.id)
    record.billTime = current.billTime
    record.billTimeEdit = false
    record.billTimeError = false
  }

  const currentFileId = ref(0)
  const previewList = ref<string[]>([])
  const onClickFile = (e: any, fileIdList: any) => {
    e.stopPropagation()
    visibleFile.value = true
    currentFileId.value = 0
    fileIdList.forEach((item: any) => {
      previewList.value.push(`${import.meta.env.VITE_BASE_PATH}/uploadFile/image/${item}`)
    })
  }

  const handleCloseFile = () => {
    previewList.value = []
    currentFileId.value = 0
    visibleFile.value = false
  }

  const handleCancel = () => {
    visible.value = false
    emits('ok')
  }

  const handleBeforeOpen = () => {
    loadData(props.data.id)
  }
</script>

<style scoped lang="less">
  .color-1890ff {
    color: #1890ff;
  }
</style>
